<template>
  <div class="address_manage">
    <!-- {{ props.activeItem }} -->
    <div class="address_manage-header">
      <el-button type="primary" @click="handelClickNewAdess">新建收货地址</el-button>
    </div>
    <div class="address_manage-content">
      <ul>
        <li
          v-for="(item, index) in props.list"
          :key="index"
          :class="item.receivingAddressId == data.numId ? 'active' : ''"
          @click="handelClickItem(item)"
        >
          <div class="content">
            <p>{{ item.receivingName }}</p>
            <p><span>电话:</span>{{ item.receivingMobile }}</p>
            <p><span>地址:</span>{{ item.receivingAreaDetail }}{{ item.receivingAddress }}</p>
          </div>
          <div class="btn">
            <div>
              <el-checkbox v-model="item.isDefault" label="设为默认收货地址" size="large" @change="handelChange(item, index)" />
            </div>
            <div>
              <el-button @click="handelClickDelet(item)">删除</el-button>
              <el-button type="primary" @click="handelClicChange(item, index)">修改</el-button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="save_btn">
      <el-button @click="handelClickBack">取消</el-button>
      <el-button type="primary" @click="handelClickSave">确定选择</el-button>
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, reactive } from "vue";
const emits = defineEmits(["delete", "addAdess", "back", "setDefault", "save", "edit"]);
const props = defineProps({
  list: {
    type: Array,
    default() {
      return [];
    }
  },
  activeItem: {
    type: Object,
    default() {
      return {};
    }
  }
});
const data = reactive({
  numId: props.activeItem.receivingAddressId,
  currentItem: {} //选中后的数据
});
const handelClickDelet = item => {
  emits("delete", item);
};
const handelClickBack = () => {
  emits("back");
};
const handelClickNewAdess = () => {
  emits("addAdess");
};
const handelChange = (item, index) => {
  emits("setDefault", item, index);
};
const handelClickSave = () => {
  emits("save", data.currentItem);
};
const handelClicChange = (item, index) => {
  emits("edit", item, index);
};
// 点击每一项的事件
const handelClickItem = item => {
  data.numId = item.receivingAddressId;
  data.currentItem = item;
};
</script>
<style lang="scss" scoped>
.active {
  border: 2px solid #409eff !important;
  box-sizing: border-box;
}
.address_manage {
  position: relative;
  &-header {
    position: absolute;
    right: 0;
    top: -40px;
  }
  &-content {
    min-height: 300px;
    max-height: 400px;
    overflow-y: scroll;
    ul {
      li {
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #e5e8ef;
        box-sizing: border-box;
        margin-bottom: 10px;
        overflow: hidden;
        .content {
          border-bottom: 1px solid #e5e8ef;
          box-sizing: border-box;
          padding: 16px;
          p {
            font-size: 14px;
            line-height: 2;
            span {
              color: #86909c;
              margin-right: 4px;
            }
          }
        }
        .btn {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0px 16px 0 16px;
          div:nth-child(2) {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .save_btn {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding-top: 20px;
  }
}
</style>
